<template>
    <view class="content">
        <view class="box" v-for="(item, index) in list" :key="index">
            <view class="time">{{item.date}}</view>
            <view class="list">
                <view class="item" v-for="(el, ind) in item.browse" :key="ind">
                    <view class="img-box" @click.stop="choose(item, el)">
                        <image :src="el.image" class="img"></image>
                        <image v-if="el.checked" :src="IMAGEURL + 'static/icon/choose_01.png'" class="choose-01"></image>
                        <image v-if="!el.checked" :src="IMAGEURL + 'static/icon/choose_02.png'" class="choose-01"></image>
                    </view>
                    <view class="name" @click.stop="toPage(item, el)">{{el.name}}</view>
                </view>
            </view>
        </view>
        
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        <view class="footer">
            <view class="f-left" @click="allChoose">
                <image v-if="isChecked" :src="IMAGEURL + 'static/icon/choose_01.png'" class="choose-02"></image>
                <image v-if="!isChecked" :src="IMAGEURL + 'static/icon/choose_02.png'" class="choose-02"></image>
                <view class="u-p-l-10">全选</view>
            </view>
            <view class="del" @click="delList">删除</view>
        </view>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                IMAGEURL,
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
                isChecked: false,
            };
        },
        onShow() {
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            // 选中每一个项目
            choose(item, el) {
                var sellectList = []
                el.checked = !el.checked;
                this.list.forEach(cur => {
                    this.$set(cur, 'aa', [])
                    cur.browse.forEach(ele => {
                        if (ele.checked) {
                            cur.aa.push(ele)
                        }
                    })
                    if (cur.browse.length == cur.aa.length) {
                        cur.checkedAll = true
                    } else {
                        cur.checkedAll = false
                    }
                    
                    if (cur.checkedAll) {
                        sellectList.push(el)
                    }
                })
                
                if (sellectList.length == this.list.length) {
                    this.isChecked = true
                } else {
                    this.isChecked = false
                }
            },
            		
            // 全选
            allChoose() {
                this.isChecked = !this.isChecked
                if (this.isChecked) {
                    this.list.forEach((item, index) => {
                        item.checkedAll = true
                        item.browse.forEach(ele => {
                            ele.checked = true
                        })
                    })
                } else {
                    this.list.forEach((item, index) => {
                        item.checkedAll = false
                        item.browse.forEach(ele => {
                            ele.checked = false
                        })
                    })
                }
            },
            		
            // 删除收藏列表
            delList() {
                var ids = [];
                this.list.forEach(item => {
                    item.browse.forEach(ele => {
                        if (ele.checked) {
                            ids.push(ele.id)
                        }
                    })
                })
                if (ids.length == 0) {
                    this.$toast('请选择项目');
                    return false;
                }
                this.$ajax('delete_collect_browse', {
                    user_token: this.$getSync('userToken'),
                    ids: ids.join(','),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.isChecked = false
                        
                        this.page = 1
                        this.status = 'loadmore'
                        this.list = []
                        this.getList()
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            toPage(item, el) {
                let sId = el.service_id || ''
                let sType = el.service_type || ''
                let iId = el.items_id || ''
                let itId = el.items2_id || ''
                let puId = el.publicize_id || ''
                this.$gTo(`/pages/goods/goods-details?sId=${sId}&sType=${sType}&iId=${iId}&itId=${itId}&puId=${puId}`)
            },
            
            // 获取列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('user_browse', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail && ret.detail.browse && ret.detail.browse.length > 0) {
            				this.list = this.list.concat(ret.detail.browse);
            				this.page++;
            				this.status = 'loadmore'
                            
                            this.list.forEach(cur => {
                                this.$set(cur, 'checkedAll', false)
                                cur.browse.forEach(el => {
                                    this.$set(el, 'checked', false)
                                })
                            })
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
        border-top: 2rpx solid #e6e6e6;
    }
    .content{
        padding: 20rpx 20rpx 100px;
    }
    .box{
        padding-top: 20rpx;
    }
    .time{
        font-size: 28rpx;
        color: #7b7b7b;
        padding-bottom: 15rpx;
    }
    .list{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .item{
        margin-right: 7rpx;
        margin-bottom: 30rpx;
    }
    .item:nth-child(3n) {
        margin-right: 0;
    }
    .img-box{
        position: relative;
    }
    .img{
        width: 230rpx;
        height: 230rpx;
        border-radius: 10rpx;
    }
    .choose-01{
        width: 33rpx;
        height: 33rpx;
        position: absolute;
        right: 18rpx;
        top: 18rpx;
        z-index: 9;
    }
    .choose-02{
        width: 33rpx;
        height: 33rpx;
    }
    .name{
        padding-top: 20rpx;
        width: 230rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    
    .footer{
        width: 100vw;
        height: 100rpx;
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
        padding: 0 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
    }
    .f-left{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .choose-02{
        width: 31rpx;
        height: 31rpx;
    }
    .del{
        font-size: 28rpx;
        color: #fff;
        padding: 18rpx 70rpx;
        background-color: #f29700;
        border-radius: 50rpx;
    }
    
    

</style>
